<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:t="http://www.w3.org/1999/xhtml">
<head th:replace="components/easyui/easyui-list :: head('菜单管理','easyui')">
<body>
<div id="tb">
    <div class="datagrid-toolbar" style="padding-bottom: 6px">
        菜单名称: <input class="easyui-textbox" style="width: 160px" id="search_name" name="name" data-options="required:false">
        权限: <t:dict class="easyui-combobox" id="search_authority" name="authority" dict-name="role_type"  style="width:160px" allow-empty="true"></t:dict>
        <a href="javascript:void(0)" class="easyui-linkbutton c-primary" style="width:80px" onclick="doSearch()"><i class="fa fa-search" aria-hidden="true"></i> <span th:text="#{search}"></span></a>
        <a href="javascript:void(0)" class="easyui-linkbutton c-basic" style="width:80px" onclick="doSearchReset()"><i class="fa fa-repeat" aria-hidden="true"></i> <span th:text="#{reset}"></span></a>
    </div>
    <div class="datagrid-toolbar easyui-panel" style="padding:5px;">
        <a href="javascript:void(0)" class="easyui-linkbutton c-primary" style="width:80px" data-options="toggle:true,group:'g1'" onclick="doAdd()"><i class="fa fa-plus" aria-hidden="true"></i> <span th:text="#{add}"></span></a>
        <a href="javascript:void(0)" class="easyui-linkbutton c-warning" style="width:80px" data-options="toggle:true,group:'g1'" onclick="doEdit()"><i class="fa fa-pencil" aria-hidden="true"></i> <span th:text="#{edit}"></span></a>
        <a href="javascript:void(0)" class="easyui-linkbutton c-danger" style="width:80px" data-options="toggle:true,group:'g1'" onclick="doDelete()"><i class="fa fa-trash" aria-hidden="true"></i> <span th:text="#{delete}"></span></a>
    </div>
</div>
<table id="table_tg" data-options="url:'sideMenus/easyui/list',method:'get',animate: true,rownumbers:true,fit:true,toolbar: '#tb', pagination: true,idField:'id',treeField:'name', singleSelect: true, selectOnCheck: true, checkOnSelect: true">
    <thead>
        <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'name',width:200,sortable:true">菜单名称</th>
            <th data-options="field:'createDate',width:200,sortable:true,align:'center'">创建时间</th>
            <th data-options="field:'url',width:200,sortable:true,align:'center'">链接</th>
            <!--<th data-options="field:'authority',width:240,sortable:true,align:'center'">菜单权限</th>-->
            <th data-options="field:'icon',width:200,formatter:formatIcon,sortable:true,align:'center'">菜单图标</th>
            <th data-options="field:'orderNum',width:200,sortable:true,align:'center'">排序</th>
        </tr>
    </thead>
</table>
<div id="addModal" class="easyui-window" title="录入" data-options="modal:true,closed:true,collapsible:false" style="width:640px;height:480px;padding:10px;">
    <form id="ff">
        <div>
            <t:dict class="easyui-combobox" id="add_menu_type" name="menuType" dict-name="menu_type"  style="width:100%" allow-empty="true" data-options="label:'菜单类型:', validType:'selectValid[\'&nbsp;&nbsp;\']'"></t:dict>
        </div>
        <div>
            <t:select id="add_menu_group_id" name="pid" order="desc" query="t_side_menu,name,id,pid=0" class="easyui-combobox" style="width:100%" data-options="label:'父菜单:'"></t:select>
        </div>
        <div>
            <input class="easyui-textbox" style="width: 100%" id="add_name" name="name" data-options="label:'菜单名称:', required:true">
        </div>
        <div>
            <input class="easyui-textbox" style="width: 100%" id="add_url" name="url" data-options="label:'链接:', required:false">
        </div>
        <!--<div>
            <t:dict class="easyui-combobox" id="add_authority" name="authority" dict-name="role_type" style="width:100%" data-options="label:'菜单权限:', multiple:true"></t:dict>
        </div>-->
        <div>
            <input class="easyui-textbox" style="width: 100%" id="add_icon" name="icon" data-options="label:'菜单图标:', required:false">
        </div>
        <div>
            <input class="easyui-textbox" style="width: 100%" id="add_orderNum" name="orderNum" data-options="label:'排序:', required:false, min:0">
        </div>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton c-primary" style="width:80px" onclick="add()" th:text="#{ok}"></a>
            <a href="javascript:void(0)" class="easyui-linkbutton c-basic" style="width:80px" onclick="clearForm()" th:text="#{cancel}"></a>
        </div>
    </form>
</div>

<div id="editModal" class="easyui-window" title="编辑" data-options="modal:true,closed:true,collapsible:false" style="width:640px;height:480px;padding:10px;">
    <form id="form_edit">
        <div>
            <input class="easyui-textbox" style="width: 100%" id="edit_id" name="id" data-options="label:'菜单id:', readonly:true">
        </div>
        <div>
            <t:dict class="easyui-combobox" id="edit_menu_type" name="menuType" dict-name="menu_type"  style="width:100%" allow-empty="false" data-options="label:'菜单类型:'"></t:dict>
        </div>
        <div>
            <t:select id="edit_menu_group_id" name="pid" order="desc" query="t_side_menu,name,id,pid=0" class="easyui-combobox" style="width:100%" data-options="label:'父菜单:'"></t:select>
        </div>
        <div>
            <input class="easyui-textbox" style="width: 100%" id="edit_name" name="name" data-options="label:'菜单名称:', required:true">
        </div>
        <div>
            <input class="easyui-textbox" style="width: 100%" id="edit_url" name="url" data-options="label:'链接:', required:false">
        </div>
        <!--<div>
            <t:dict class="easyui-combobox" id="edit_authority" name="authority" dict-name="role_type" style="width:100%" data-options="label:'菜单权限:', multiple:true"></t:dict>
        </div>-->
        <div>
            <input class="easyui-textbox" style="width: 100%" id="edit_icon" name="icon" data-options="label:'菜单图标:', required:false">
        </div>
        <div>
            <input class="easyui-numberbox" style="width: 100%" id="edit_orderNum" name="orderNum" data-options="label:'排序:', required:false, min:0">
        </div>
        <div style="text-align:center;">
            <a href="javascript:void(0)" class="easyui-linkbutton c-primary" style="width:80px" onclick="edit()" th:text="#{ok}"></a>
            <a href="javascript:void(0)" class="easyui-linkbutton c-basic" style="width:80px" onclick="clearForm()" th:text="#{cancel}"></a>
        </div>
    </form>
</div>
<div th:replace="components/easyui/easyui-list :: js('easyui')"></div>
<script>
    $(function () {

        /*$('#edit_menu_type').combobox({
            onChange: function (newValue, oldValue) {
                console.log('newValue=' + newValue);
                if('1' == newValue){
                    $('#edit_menu_group_id').combobox({
                        disabled: true
                    });
                    $('#edit_url').textbox({
                        disabled: true
                    });
                }else{
                    $('#edit_menu_group_id').combobox({
                        disabled: false
                    });
                    $('#edit_url').textbox({
                        disabled: false
                    });
                }
            }
        });*/


        /*let editMenuType = $('#edit_menu_type').val();
        if('1' == editMenuType){
            $('#edit_menu_group_id').combobox({
                disabled: true
            });
            $('#edit_url').textbox({
                disabled: true
            });
        }else{
            $('#edit_menu_group_id').combobox({
                disabled: false
            });
            $('#edit_url').textbox({
                disabled: false
            });
        }*/
    });

    function doSearch() {
        $('#table_tg').treegrid('load', {
            name: $('#search_name').val(),
            authority: $('#search_authority').val()
        });
    }

    function doSearchReset() {
        $('#search_name').textbox('setValue', '');
        $('#search_authority').combobox('select', '');
        doSearch();
    }

    function doAdd() {
        /*let addMenuType = $('#add_menu_type').val();
        if('1' == addMenuType){
            $('#add_menu_group_id').combobox({
                disabled: true
            });
            $('#add_url').textbox({
                disabled: true
            });
        }else{
            $('#add_menu_group_id').combobox({
                disabled: false
            });
            $('#add_url').textbox({
                disabled: false
            });
        }*/

        $('#addModal').window('open');

        $('#add_menu_type').combobox({
            onChange: function (newValue, oldValue) {
                console.log('newValue=' + newValue);
                if('1' == newValue){
                    $('#add_menu_group_id').combobox({
                        disabled: true
                    });
                    $('#add_url').textbox({
                        disabled: true
                    });
                }else{
                    $('#add_menu_group_id').combobox({
                        disabled: false
                    });
                    $('#add_url').textbox({
                        disabled: false
                    });
                }
            }
        });
    }

    function doEdit() {
        //获取选中的第一行数据
        //var row = $('#tt').datagrid('getSelected');
        //获取选中的所有行数据
        let rows = $('#table_tg').treegrid('getSelections');
        if(rows.length == 1){
            let row = rows[0];
            console.log(row);
            $('#edit_id').textbox('setValue', row.id);
            $('#edit_menu_type').combobox('setValue', row.menuType);
            $('#edit_menu_group_id').combobox('setValue', row.pid);
            $('#edit_name').textbox('setValue', row.name);
            $('#edit_url').textbox('setValue', row.url);
            $('#edit_authority').combobox('setValues', row.authority);
            $('#edit_icon').textbox('setValue', row.icon);
            $('#edit_orderNum').numberbox('setValue', '' + row.orderNum);
            $('#editModal').window('open');

            $.parser.parse($('#edit_orderNum').parent());
        }else{
            $.messager.alert('提示信息','请选择一条数据！','error');
        }
    }
    
    function doDelete() {
        deleteRequest('/sideMenus/ids/');
    }
    
    function add() {
        doRequest({
            formId: '#ff',
            url: '/sideMenus',
            type: 'POST'
        });
    }

    function edit() {
        doRequest({
           formId: '#form_edit',
            url: '/sideMenus',
            type: 'PATCH'
        });
    }
    
    function clearForm() {
        $('#ff').form('clear');
        $('#addModal').window('close');

        $('#form_edit').form('clear');
        $('#editModal').window('close');
    }

    function formatIcon(val, row){
        return '<i class="' + val + '" aria-hidden="true"></i>';
    }
</script>
</body>
</html>